<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        .main {
            width: 400px;
            height: 300px;
            background-color: lavender;
            margin: auto;
            display: flex;

        }

        .leftLi {
            flex: 1;
        }

        .leftLi ul,
        .rightLi ul {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-content: stretch;
        }

        .leftLi ul li,
        .rightLi ul li {
            flex: 1;
            text-align: center;
            font-size: 14px;
            padding: 3px;
            border: 1px solid pink;
            background-image: url(./素材/lili.jpg);
        }

        .show {
            flex: 3;
        }

        .show img {
            width: 100%;

        }

        .rightLi {
            flex: 1;

        }
    </style>
</head>

<body>
    <div class="main">
        <div class="leftLi">
            <ul>
                <li>女靴</li>
                <li>雪地靴</li>
                <li>冬裙</li>
                <li>呢大衣</li>
                <li>毛衣</li>
                <li>棉服</li>
                <li>女裤</li>
                <li>羽绒服</li>
                <li>牛仔裤</li>
            </ul>
        </div>
        <div class="show">
            <img src="./素材/女靴.jpg" alt="" srcset="">
        </div>
        <div class="rightLi">
            <ul>
                <li>女包</li>
                <li>男包</li>
                <li>登山鞋</li>
                <li>皮带</li>
                <li>围巾</li>
                <li>皮衣</li>
                <li>男毛衣</li>
                <li>男棉服</li>
                <li>男靴</li>
            </ul>
        </div>
    </div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    let showObj = {
        '女靴': './素材/女靴.jpg',
        '雪地靴': './素材/雪地靴.jpg',
        '冬裙': './素材/冬裙.jpg',
        '呢大衣': './素材/呢大衣.jpg',
        '毛衣': './素材/毛衣.jpg',
        '棉服': './素材/棉服.jpg',
        '女裤': './素材/女裤.jpg',
        '羽绒服': './素材/羽绒服.jpg',
        '牛仔裤': './素材/牛仔裤.jpg',
        '女包': './素材/女包.jpg',
        '男包': './素材/男包.jpg',
        '登山鞋': './素材/登山鞋.jpg',
        '皮带': './素材/皮带.jpg',
        '围巾': './素材/围巾.jpg',
        '皮衣': './素材/皮衣.jpg',
        '男毛衣': './素材/男毛衣.jpg',
        '男棉服': './素材/男棉服.jpg',
        '男靴': './素材/男靴.jpg',

    }
    $(function () {
        // console.log($('.show img').attr('src'));
        $('li').mouseenter(function () {
            $(this).css("background-image", "url(./素材/abg.gif)")
            // console.log(showObj[$(this).text()]);
            $('.show img').attr('src', showObj[$(this).text()])
        })
        $('li').mouseleave(function () {
            $(this).css("background-image", "")
        })
    })
</script>

</html>